import React from 'react';
import { List, Button } from 'antd';
import { UserOutlined, PlusOutlined } from '@ant-design/icons';
import './UserList.css';

const UserList = ({ users, currentUser, onUserSelect, onAddUser }) => {
  const handleUserClick = (user) => {
    if (user.id !== currentUser?.id) {
      onUserSelect(user);
    }
  };

  const handleAddUser = () => {
    // 生成一个随机用户名
    const randomUsername = `用户${Math.floor(Math.random() * 1000)}`;
    onAddUser(randomUsername);
  };

  console.log("users",users);
  

  return (
    <div className="user-list">
      <div className="user-list-header">
        <h3>用户列表</h3>
        <Button 
          type="primary" 
          icon={<PlusOutlined />} 
          onClick={handleAddUser}
        >
          添加用户
        </Button>
      </div>
      <List
        dataSource={users}
        renderItem={user => (
          <List.Item
            className={`user-item ${user.id === currentUser?.id ? 'active' : ''}`}
            onClick={() => handleUserClick(user)}
          >
            <UserOutlined className="user-icon" />
            <span className="username">{user.username}</span>
          </List.Item>
        )}
      />
    </div>
  );
};

export default UserList; 